import React, {Component} from "react";
import {Card} from 'antd';
import "./BlogBlock.less";
class BlogBlock extends Component{
    constructor(props) {
        super(props);
        this.state={
            hoverStyle:{},
            fontHoverStyle:{},
            imgHoverStyle:{},
            coverHoverStyle:{},
        }
    }

    /* 鼠标移入*/
    MouseEnter(item){
        console.log(item);
        this.setState({
            hoverStyle:{
                // height: '80%',
                top:'60%',
            },
            fontHoverStyle:{
                top:'10%'
            },
            imgHoverStyle:{
                transform: 'scale(1.1)',
            },
            coverHoverStyle:{
              height: '100%',
            },
        })
    }
    /* 鼠标移出*/
    MouseLeave(){
        console.log("鼠标移出");
        this.setState({
            hoverStyle:{},
            fontHoverStyle:{},
            imgHoverStyle:{},
            coverHoverStyle:{},
        })
    }
    render(){
        const {coverHoverStyle,imgHoverStyle,hoverStyle,fontHoverStyle} = this.state;
        return(
            <Card className={'blogBlock'}
                  onMouseEnter={()=>this.MouseEnter(this)}     //移入
                  onMouseLeave={()=>this.MouseLeave()}     //移出
            >
                <div  style={{height: 200,overflow:'hidden'}}>
                    <a href="/" >
                        {/*遮罩层*/}
                        <div className={'image-cover'} style={coverHoverStyle}></div>
                        <img style={imgHoverStyle} className="article-panel-img" src="src\static\imge\2.PNG"/>
                        <div className="panel-head " style={fontHoverStyle}>
                            <a className="article-panel-font">[archeage]冷瞳和喵喵的上古世纪</a>
                        </div>
                        <div className="panel-body" style={hoverStyle}>
                            <div  className={'blog-info'}><p  >如果你说的每一句话我都回回复你,说明我喜欢你呀~如果你说的每一句话我都回回复你,说明我喜欢你呀~如果你说的每一句话我都回回复你,说明我喜欢你呀~如果你说的每一句话我都回回复你,说明我喜欢你呀~如果你说的每一句话我都回回复你,说明我喜欢你呀~</p></div>
                            <div  ><p className={'blog-info-foot'}>1999-09-13 1300 21</p></div>
                        </div>
                    </a>
                </div>
            </Card>
        )
    }
}

export default BlogBlock;